<template>
    <view class="warehouse-in">
        <!-- <view class="warehouse-in-sum">
            <text>共
            <text class="font-CE0C0C">{{ warehouseInData.total }}</text>
            <text>个记录，</text></text>
            <text class="font-CE0C0C">3000</text>
            <text> 件，</text>
            <text class="font-CE0C0C">30.600</text>
            <text>吨</text>
        </view> -->
		<view class="filter display-flex justify-end">
			<view class="display-flex align-center" @click="changePopupShow">
				<text class="font-28">筛选</text>
				<image src="@/static/icons/filter_icon.png" class="filter-icon"/>
			</view>
		</view>
		<view class="mt-200" v-if="warehouseInData.total === 0">
			<empty-data  :imgSrc="IMG_URL + '/status/no_list.png'"></empty-data>
		</view>
		<view class="warehouse-in-list" v-if="warehouseInData.total > 0">
		
          <view class="section font-26" v-for="(item, index) in warehouseInData.list" :key="index">
              <view class="section-permi" @click="goDetail(item)"></view>
              <view>
                  <view :class="[item.shztn == 0?'border-left-CE0C0C':'border-left-2CB526','title display-flex justify-between align-center']">
                      <view>
                          <text class="font-999999">进仓单号：</text>
                          <text>{{ item.pzbh }}</text>
                      </view>
                      <text class="font-CE0C0C" v-if="item.shztn == 0">{{ item.shzt }}</text>
                      <text class="font-2CB526" v-else>{{ item.shzt }}</text>
                  </view>
                  <view class="content display-flex justify-between">   
                      <view class="flex">
                          <view class="item display-flex">
                              <text class="label">件数：</text>
                              <text>{{ item.spjs }}件</text>
                          </view>
                          <view class="item display-flex">
                              <text class="label">重量：</text>
                              <text>{{ item.spsl }}吨</text>
                          </view>
                          <view class="item display-flex">
                              <text class="label">车牌号：</text>
                              <text>{{ item.dzzy6 }}</text>
                          </view>
                          <view class="item display-flex">
                              <text class="label">仓库：</text>
                              <text>{{ item.spckmc }}</text>
                          </view>
                          <view class="item display-flex">
                              <text class="label">进仓日期：</text>
                              <text>{{ item.ssrqid }}</text>
                          </view>
                      </view>
                      <view class="flex">
                          <view class="item display-flex">
                              <text class="label">创建者：</text>
                              <text>{{ item.rsopmc }}</text>
                          </view>
                          <view class="item display-flex">
                              <text class="label">创建时间：</text>
                              <text class="flex">{{ item.prrq }}</text>
                          </view>
                      </view>
                  </view>
              </view>
          </view>
		</view>
        <view class="warehouse-in-btn">
            <button class="app-primary-button" hover-class="app-primary-button-active" @click="handleAppoint">预约进仓</button>
        </view>
		<u-drawer class="search" mode="right" width="584" :show="showPopup" @close="beforeClose">
			<template v-slot:top>
				<view class="search-content font-26 font-black">
				    <view>
				        <text>进仓日期</text>
				       <period-picker :date1="warehouseInData.query.rqid1" :date2="warehouseInData.query.rqid2" @selectDate1="selectDate1" @selectDate2="selectDate2"/>
				    </view>
				  <!--  <view class="mt-30">
				        <text>仓库</text>
				        <view class="mt-20 search-item" @click="selectWarehouse">
				            <text v-if="warehouseInData.query.spckmc">{{ warehouseInData.query.spckmc1 }}</text>
				            <text class="font-666666" v-else>请选择仓库</text>
				        </view>
				    </view> -->
				    <view class="mt-30">
				        <text>车牌号</text>
				        <input v-model="warehouseInData.query.dzzy6" placeholder="支持模糊查询" class="search-item-input mt-20" />
				    </view>
				    <view class="mt-30">
				        <text >进仓单号</text>
				        <input v-model="warehouseInData.query.pzbh" placeholder="支持模糊查询" class="search-item-input mt-20" />
				    </view>
					<view class="mt-30">
					    <text>仓库</text>
						<select-btn-group :list="warehouse15Data.list" @click="selectOne($event)"></select-btn-group>
					</view>
				</view>
			</template>
			<template v-slot:bottom>
				<view class="display-flex search-footer justify-between">
				    <view class="plain-btn" @click="reset">重置</view>
				    <view class="btn" @click="handleSearch">确定</view>
				</view>
			</template>
		</u-drawer>
     <!--  <u-popup :show="searchData.showSpckmc" title="请选择仓库"  @close="changeSpckmcShow">
		   <template v-slot:content>
			 <view class="select-warehouse15 display-flex flex-wrap">
			     <view v-for="(item, index) in warehouse15Data.list" :key="item.spckid" :class="item.active?'active item':'item'" @click="warehouseSelected(index)">
			         <text>{{ item.spckmc }}</text>
			     </view>
			 </view>  
		   </template>
        </u-popup> -->
		<view class="load-more" v-if="warehouseInData.total > 0">
			<u-load-more  ref="loadMoreRef"></u-load-more>
		</view>
    </view>
</template>
<script setup lang="ts">
    import { ref, reactive } from 'vue'
    import { stock } from '@/api'
    import { tip, storage } from '@/utils'
	import { useAuthStore } from '@/store/auth'
    import type { SearchData, Warehouse15Data, WarehouseInData} from '@/@type/warehouseIn'
	import { onLoad, onPullDownRefresh, onReachBottom } from '@dcloudio/uni-app';
	import emptyData from '@/pages/components/empty-data'
	import { IMG_URL } from '@/utils/constant'
	
	const loadMoreRef = ref()
	const authStore = useAuthStore()
	const user = authStore.getUser()
    const searchData: SearchData = reactive({
        showSpckmc:false
    })
    const warehouse15Data:Warehouse15Data = reactive({
        query:{},
        list:[]
    })
    const warehouseInData: any = reactive({
        query: {
            ckcw: "",
            dzzy6: "",
            jqcz: "",
            pzbh: "",
            pzbh1: "",
            rqid1: "",
            rqid2: "",
            shzt: "",
            spbh: "",
            spckmc1: "",
            spckmc: "",
            spgh: "",
			khmcid:user.shopId,
            spkhmc: user.shopName,
			spckids:[],
            spkhmc1: "",
            sptm: "",
            ssrqid: "",
            wbdh: "",
			noLoading:false
        },
        list:[],
        total:'',
        params:{
            pageNum:1,
            pageSize:10
        }
    })
    const showPopup = ref(false)
    
    onLoad(() => {
        getList()
        warehouse15()
    })
	
	uni.$on('warehouseInAdd', () => {
		refresh()
	})
	
	onReachBottom(() => {
		if(warehouseInData.params.pageNum * warehouseInData.params.pageSize > warehouseInData.total) return loadMoreRef.value.changeStatusNoMore()
		warehouseInData.params.pageNum++
		loadMoreRef.value.changeStatusLoading()
		setTimeout(() => {
			warehouseInData.query.noLoading = true
			getList(() => {
				loadMoreRef.value.changeStatusNoLoading()
				if(warehouseInData.params.pageNum * warehouseInData.params.pageSize > warehouseInData.total) return loadMoreRef.value.changeStatusNoMore()
			})
		}, 300)
	})
	
	onPullDownRefresh(() => {
		if(warehouseInData.total === 0) uni.stopPullDownRefresh()
		refresh()
		setTimeout(function () {
			uni.stopPullDownRefresh()
		}, 1000)
	})
	
	const refresh = () => {
		warehouseInData.query.noLoading = false
		if(loadMoreRef.value) loadMoreRef.value.changeStatusNoLoading()
		warehouseInData.params.pageNum = 1
		warehouseInData.list = []
		getList()
	}

    const getList = (cb?:Function) => {
        stock.getWarehouseInList(warehouseInData.query, warehouseInData.params).then((res: any) => {
			cb && cb()
			warehouseInData.total = res.total
			warehouseInData.list = [...warehouseInData.list,...res.rows]
			          
        })
    }

    const warehouse15 = () => {
        stock.getWarehouse15({}).then((res:any) => {
            // const data = res.data
            // for(let i in data) {
            //     data[i].active = false
            // }
            // warehouse15Data.list = data
			warehouse15Data.list = res.data.map((i:any) => {return {name:i.spckmc, id:i.spckid, active:false}})
        })
    }


    const selectDate1 = (date:string) => {
        warehouseInData.query.rqid1 = date
    }
    
    const selectDate2 = (date:string) => {
        warehouseInData.query.rqid2 = date
    }

    const selectWarehouse =() => {
        changeSpckmcShow()
    }

    const changeSpckmcShow = () =>{
        searchData.showSpckmc = !searchData.showSpckmc
    }
	
	const selectOne = (data:any) => {
		warehouse15Data.list[data.index].active = !warehouse15Data.list[data.index].active
	}

    // const warehouseSelected = (index:number) => {
    //     const data: any = warehouse15Data.list
    //     for(let i in data) {
    //         data[i].active = false
    //     }
    //     data[index].active = true
    //     warehouseInData.query.spckmc = data[index].spckid
    //     warehouseInData.query.spckmc1 = data[index].spckmc
    //     changeSpckmcShow()
    // }


    const handleAppoint = () => {
        storage.setLocalStorage('warehouseIn', null)
        uni.navigateTo({url:'/pages/storage/warehouseIn/appoint'})
    }

    const goDetail = (data: any) => {
        uni.navigateTo({url:'/pages/storage/warehouseIn/detailList?dzid=' + data.dzid})
    }

    const changePopupShow = () => {
        showPopup.value = !showPopup.value
    }

    const handleSearch = () => {
        if(warehouseInData.query.rqid1 && !warehouseInData.query.rqid2) {
            return tip.showToast('请选择截止日期')
        }
        if(warehouseInData.query.rqid2 && !warehouseInData.query.rqid1) {
            return tip.showToast('请选择开始日期')
        }
        warehouseInData.params.pageNum = 1
        warehouseInData.list = []
        warehouseInData.total = ''
		warehouseInData.query.spckids = []
		warehouse15Data.list.map((item:any) => {
			if(item.active) {
				warehouseInData.query.spckids.push(item.id)
			}
		})
        getList()
        changePopupShow()
    }

    const beforeClose = () => {
        changePopupShow()
        getList()
    }

    const reset = () => {
        warehouseInData.query = {
            ckcw: "",
            dzzy6: "",
            jqcz: "",
            pzbh: "",
            pzbh1: "",
            rqid1: "",
            rqid2: "",
            shzt: "",
            spbh: "",
            spckmc: "",
            spckmc1: "",
            spgh: "",
			spckids:[],
            spkhmc: "",
            spkhmc1: "",
            sptm: "",
            ssrqid: "",
            wbdh: ""
        }
        const data: any = warehouse15Data.list
        for(let i in data) {
            data[i].active = false
        }
    }
</script>
<style lang="scss" scoped>
    .search {
        .search-content {
			padding: 69rpx 0rpx 66rpx 30rpx; 
            .date-period-select {
                margin-top: 20rpx;
                .date {
                    text-align:center;
                    width:194rpx;
                    height:60rpx;
                    line-height: 60rpx;
                    background: #F3F4F7;
                    border-radius: 30rpx;
                }
                .start-date {
                    margin-right: 20rpx;
                } 
                .end-date {
                    margin-left: 20rpx;
                }
            }
            .search-item {
                text-align:center;
                width: 451rpx;
                height: 60rpx;
                line-height: 60rpx;
                border-radius: 30rpx;
                background: #F3F4F7;
                display:block;
            }
            .search-item-input {
                text-align:center;
                width: 451rpx;
                height: 60rpx;
                border-radius: 30rpx;
                background: #F3F4F7;
				font-size:28rpx;
                display:block;
                border:none;
            }
        }
        .search-footer {
            padding:0 50rpx 80rpx; 
			.plain-btn {
				width:212rpx;
				height: 90rpx;
				text-align: center;
				line-height: 90rpx;
				background-color: #f1f1f1;
				border-radius: 16rpx;
			}
            .btn {
                width:212rpx;
                height: 90rpx;
				background-color: #255FB6;
				color:#fff;
				text-align: center;
				line-height: 90rpx;
				border-radius: 16rpx;
            }    
        } 
    } 
    .select-warehouse15 {
        padding:15rpx 20rpx 30rpx;
        height: 550rpx;
        font-size: 26rpx;
        .item {
            min-width:150rpx;
            padding:0 10rpx;
            display:inline-block;
            height:60rpx;
            line-height: 60rpx;
            color:#999;
            text-align:center;
            border-radius:30rpx;
            border:1rpx solid #999;
            margin:15rpx;
            &.active {
                color:#fff;
                border:1rpx solid #255FB6;
                background:#255FB6;
            }
        }
    }
    .warehouse-in {
		padding:36rpx 0 120rpx;
        &-sum {
            padding:36rpx;
            font-size:26rpx;
        }
		.filter {
				padding:0 30rpx 30rpx 0;
			.filter-icon {
				width: 24rpx;
				height: 24rpx;
				margin-left:5rpx;
			}
		}
        &-list {
            padding:0rpx 36rpx;
			
            .section {
                border-radius: 10rpx;
                background-color:#fff;
                padding:26rpx 26rpx 26rpx 0;
                margin-bottom:20rpx;
                position:relative;
                &-permi {
                    width:100%;
                    height:100%;
                    position:absolute;
                    top:0rpx;
                    left:0rpx;
                    right:0rpx;
                    bottom:0rpx;
                }
                .border-left-CE0C0C {
                    border-left:8rpx solid #CE0C0C;
                }
                .border-left-2CB526 {
                    border-left:8rpx solid #2CB526;
                }
                .title {
                    padding-left:18rpx;
                    margin-bottom: 26rpx;
                    
                }
                .content {
                    border-top:1rpx solid #EEEEEE;
                    margin-left:26rpx;
                    padding:26rpx 0 0;
                    .item {
                        padding-bottom:20rpx;
                        .label {
                            color:#999;
                            width:140rpx;
                            display:inline-block;
                        }
                    }
                }
                
            }
        }
        &-btn {
            position:fixed;
            bottom:0;
            left:0;
            right:0;
            padding:20rpx 36rpx;
            .btn {
                border-radius: 10rpx;
            }
        }
    }
</style>